<script setup>
import { RouterView, useRouter } from "vue-router";
import { ref } from "vue";
import { Icon as TIcon } from "tdesign-icons-vue-next";

const value = ref("label_1");
const list = ref([
  {
    name: "label_1",
    text: "首页",
    icon: "/public/sy1.png",
    path: "/",
    currentImage: "sy2",
    ico: "/public/sy.png",
  },
  {
    name: "label_2",
    text: "分类",
    icon: "/public/fl.png",
    path: "/fenlei",
    currentImage: "sy1",
    ico: "/public/fl1.png",
  },
  {
    name: "label_3",
    text: "花友圈",
    icon: "/public/flow.png",
    path: "/flower",
    currentImage: "sy1",
    ico: "/public/flow1.png",
  },
  {
    name: "label_4",
    text: "订单",
    icon: "/public/cat.png",
    path: "/caradd",
    currentImage: "sy1",
    ico: "/public/cat1.png",
  },
  {
    name: "label_5",
    text: "我的",
    icon: "/public/user.png",
    path: "/user",
    currentImage: "sy1",
    ico: "/public/user1.png",
  },
]);
const router = useRouter(); // 获取路由实例

const handleTabChange = (value) => {
  const selectedTab = list.value.find((item) => item.name === value);
  if (selectedTab) {
    // 切换图片
    list.value.forEach((item) => {
      item.currentImage = item.name === selectedTab.name ? "sy2" : "sy1";
    });
    router.push(selectedTab.path); // 路由跳转
  }
};
</script>

<template>
  <div class="app">
    <RouterView />
    <t-tab-bar
      @change="handleTabChange"
      v-model="value"
      :split="false"
      class="custom-tab-bar"
    >
      <t-tab-bar-item
        class="custom-tab-bar-item"
        v-for="item in list"
        :key="item.name"
        :value="item.name"
        :badge-props="item.badgeProps"
        :aria-label="item.ariaLabel"
      >
        {{ item.text }}
        <template #icon>
          <div class="icon-container">
            <img
              v-if="item.currentImage === 'sy1'"
              class="sy1"
              :src="item.icon"
            />
            <img
              v-if="item.currentImage === 'sy2'"
              class="sy2"
              :src="item.ico"
            />
          </div>
        </template>
      </t-tab-bar-item>
    </t-tab-bar>
  </div>
  
</template>

<style scoped>
.custom-tab-bar {
  width: 100%;
  --td-tab-bar-active-color: #f8555d;
}
.sy1 {
  width: 100%;
  height: 20px;
}
.sy2 {
  width: 100%;
  height: 20px;
}
.icon-container {
  text-align: center;
}
</style>
